function Tab(el) {
    this.el = document.querySelector(el)
    this.ullis = this.el.querySelectorAll('ul li')
    this.ollis = this.el.querySelectorAll('ol li')
    //自启动
    this.init()
}

Tab.prototype.init = function () {
    //里面可以写多个功能
    this.tabOver()
}

Tab.prototype.tabOver = function () {
    //先遍历所有的li
    this.ullis.forEach((item, i) => {
        //给每个item都绑定鼠标移入事件
        item.onmouseover = () => {
            //封装两个方法
            this.changeTitle(item)
            this.changeContent(i)
        }
    })
}
Tab.prototype.changeTitle = function (item) {
    //把有active的ul下的li的类名去掉
    this.el.querySelector('ul li.active').className = ''
    //给当前item的classname加上
    item.className = 'active'
}
Tab.prototype.changeContent = function (i) {

    //把所有active的ol下的li的类名去掉
    this.el.querySelector('ol li.active').className = ''
    this.ollis[i].className = 'active'
}